import 'package:flutter/material.dart';

import '../package_model_comm.dart';
/*
 * @class NavType
 * @author: ZhongWb
 * @date: 2019/12/18 9:18
 * @description 分类导航条
 **/
class NavType extends StatefulWidget {
  double width;//宽度
  double height;//高度
  Color color;//背景颜色
  Color activeColor;//选择后颜色
  double fontSize;//字体大小
  Color fontColor;//未选择字体颜色
  Color activeFontColor;//选择后字体颜色
  ValueChanged onChanged;//回调选择的下标  用于相关操作
  int defSelect;//默认选择项
  List<BaseModel> data;//导航条参数  格式：map["name"] String ,  map["id"] int
  int materialType;// 0 胶囊式   1下划线式
  EdgeInsetsGeometry padding;//内边距
  NavType({
    this.materialType:0,
    this.defSelect:0,
    this.data,
    this.color,
    this.width:280,
    this.activeColor:Colors.blue,
    this.fontSize:16,
    this.activeFontColor:Colors.white,
    this.height:40,
    this.fontColor:Colors.black38,
    this.onChanged,
    this.padding,
});
  @override
  _NavTypeState createState() => _NavTypeState();
}

class _NavTypeState extends State<NavType> {
  int selectId = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    if(widget.defSelect!=null) setState(() {selectId = widget.defSelect;});
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      color: bgColor(widget.color) ,
      padding:widget.padding ?? EdgeInsets.all(0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children:_item(widget.data),
      ),
    );
  }

  bgColor(Color color){
      if(color!=null){
        return color;                                                                                                                                                                                        
      }
    if(widget.materialType==0){
      return Colors.grey[200];
    }
    if(widget.materialType==1){
      return Colors.blue;
    }
    if(widget.materialType==2){
      return Colors.white;
    }
    
  }

  _item(List<BaseModel> data){
    List<Widget> item = [];
//    使用迭代器 循还添加每个按钮
    data.forEach((f){
      item.add(
        InkWell(
          child:_item1(f,data.length),
          onTap: (){
            setState(() {
              selectId = f.index;
            });
            widget.onChanged(selectId);
          },
        ),
      );
    });


    return item;
  }
  
  Widget _item1(BaseModel f,length){
    //胶囊式
    if(widget.materialType==0){
      return  Container(
        width: widget.width /length ,
        alignment: Alignment.center,
        height: widget.height,
        color: selectId == f.index?widget.activeColor:widget.color ?? Colors.grey[200],
        child: Text(f.name,style: TextStyle(color: selectId==f.index?widget.activeFontColor:widget.fontColor,),),
      );
    }
    //下划线式1
    if(widget.materialType==1){
      return  Column(
        children: <Widget>[
          Container(
            //宽度 / 个数 = 平均宽
            width: widget.width / length ,
            alignment: Alignment.center,
            //设置外边 item高度 - 下划线高度
            padding: EdgeInsets.only(top: 8),
            //-10 给下划线腾出空间
            height: widget.height-10,
            child: Text(f.name,style: TextStyle(color: selectId==f.index?widget.activeFontColor:widget.fontColor,),),
          ),
          //下划线
          selectId==f.index ? Container(width: 10,height: 2,color: Colors.white,):Container(),
        ],
      );
    }

    //下划线式2
    if(widget.materialType==2){
      return  Column(
        children: <Widget>[
          Container(
            //宽度 / 个数 = 平均宽
            width: widget.width / length ,
            alignment: Alignment.center,
            //设置外边 item高度 - 下划线高度
            padding: EdgeInsets.only(top: 8),
            //-10 给下划线腾出空间
            height: widget.height-10,
            child: Text(f.name,style: TextStyle(color: selectId==f.index?widget.activeFontColor:widget.fontColor,),),
          ),
          SizedBox(height: 7,),
          //下划线
          selectId==f.index ? Container(width:widget.width / length,height: 3,color: Colors.blue,):Container(),
        ],
      );
    }
  }
}
